<!--
 * @Author: zywu 1061096367@qq.com
 * @Date: 2022-05-31 17:54:16
 * @LastEditors: zywu
 * @LastEditTime: 2022-06-07 14:23:06
 * @Description: 
-->
<template>
  <div class="dtu-data">
    <van-nav-bar :title="title" fixed left-arrow @click-left="back" />
    <div style="height:60px;"></div>
    <div class="e-pl-15 e-pr-15 e-pb-15">
      <div class="e-flex-x-center">
        <van-loading v-show="loading" />
      </div>
      <div v-for="(n,i) in list" :key="n.id">
        <div class="e-flex">
          <div class="dtu-data-index e-mt-5 e-flex-xy-center e-bg-primary e-color-white e-f-12">{{i+1}}</div>
          <div class="e-ml-15 e-flex-1">
            <div>
              <span class="e-color-333">描述：</span>
              <span class="e-color-999">{{n.descs}}</span>
            </div>
            <div>
              <span class="e-color-333">数据上传时间：</span>
              <span class="e-color-999">{{n.createTime}}</span>
            </div>
            <div class="e-flex">
              <div class="e-flex-1" :class="{'ell2':!n.expand}">
                <span class="e-color-333">数据上传内容：</span>
                <span class="e-color-999">{{n.messageData}}</span>
              </div>
               <van-icon class="e-p-5 e-ml-5" :name="n.expand?'arrow-up':'arrow-down'" @click="n.expand=!n.expand" />
            </div>
          </div>
        </div>
        <van-divider />
      </div>
      <van-empty v-if="nodata" description="暂无数据" />
    </div>
  </div>
</template>

<script>
import { getUitbRecord } from '@/api/device'
export default {
  components: {},

  props: {},

  data() {
    return {
      loading:false,
      title: '',
      nodata: false,
      list: [
      ],
    }
  },

  computed: {},

  watch: {},

  created() {
    this.deviceNo = this.$route.params.deviceNo
    this.title = this.$route.params.name
    this.getList()
  },

  mounted() {},

  methods: {
    getList() {
      this.loading = true
      getUitbRecord({
        deviceNo: this.deviceNo,
      })
        .then(({ data }) => {
          data.forEach(n=>{
            n.expand=false
          })
          this.list = data
          this.nodata = data.length == 0
          this.loading = false
        })
        .catch(() => {
          this.nodata = false
          this.loading = false
        })
    },
    back() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang='scss'>
.dtu-data {
  &-index{
    width: 20px;
    height: 20px;
    border-radius: 10px;
  }
}
</style>